﻿@{
    string mode = PageData[0];
    string frm_claimDate = PageData[1];
    string frm_claimStartWorkTime = PageData[2];
    string frm_claimEndWorkTime = PageData[3];
    string frm_claimStartOT = PageData[4];
    string frm_claimEndOT = PageData[5];
    string frm_claimHours_OT1_5 = PageData[6];
    string frm_claimHours_OT2_0 = PageData[7];
    string frm_claimHours_PH = PageData[8];
    string frm_claimHours_Less4H = PageData[9];
    string frm_claimHours_More4H = PageData[10];
    string frm_claimAllowance_Meal = PageData[11];
    string frm_claimAllowance_Shift = PageData[12];
    string frm_claimShiftType = PageData[13];
    string frm_claimRemark = PageData[14];
    string frm_claimTotalOTHours = PageData[15];
    string frm_claimBreakHours = PageData[16];
}

<table class="table table-bordered table-condensed custom-fullwidth">
    <thead>
        <tr>
            <td colspan="8"></td>
            <td colspan="5" class="text-nowrap" style="font-weight:bold; color:red;">No of overtime hours worked(excl. breaks)</td>
            <td colspan="4"></td>
        </tr>
        <tr>
            <th rowspan="2">Date<sup style="font-weight:bold;color:red;">*</sup></th>
            <th rowspan="2" style="width:90px;">Shift Type <br />(for shift staff only)</th>
            <th colspan="2" class="text-center">Official Hours</th>
            <th colspan="2" class="text-center">Overtime Hours</th>
            <th rowspan="2" style="width:56px;" class="text-center">Total OT Hours</th>
            <th rowspan="2" style="width:56px;" class="text-center">Break Hours</th>
            <th colspan="2" class="text-center">OT Rate <span class="glyphicon glyphicon-info-sign" style="color:black;font-size:large;cursor:pointer;vertical-align:middle;" title="Information" aria-hidden="true" onclick="javascript: $('#otRateModal').modal('show');"></span></th>
            <th rowspan="2" title="Public Holiday" style="cursor:default;text-align:center;">PH</th>
            <th colspan="2" class="text-center">Rest Day</th>
            <th rowspan="2" style="width:90px;" title="Meal Allowance">Meal<br />Allw($) <span class="glyphicon glyphicon-info-sign" style="color:black;font-size:large;cursor:pointer;vertical-align:middle;" title="Information" aria-hidden="true" onclick="javascript: $('#mealAllwModal').modal('show');"></span></th>
            <th rowspan="2" style="width:90px;" title="Shift Allowance">Shift Allw($)<br />(for shift staff only)</th>
            <th rowspan="2">Description of Work Performed During Overtime Hours Worked</th>
            <th rowspan="2">Actions</th>
        </tr>
        <tr>
            <th>Start Time</th>
            <th>End Time</th>
            <th>Start Time</th>
            <th>End Time</th>
            <th style="white-space:nowrap;text-align:center;">1.5 X</th>
            <th style="white-space:nowrap;text-align:center;">2.0 X</th>
            <th style="text-align:center;" title="Less than 4 hours">&lt;4</th>
            <th style="text-align:center;" title="More than 4 hours">&gt;4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input class="datepicker" name="claimDate" id="claimDate" style="width:116px;" value="@frm_claimDate" autocomplete="off" /></td>
            <td><input type="text" style="width:90px" class="kendo_textbox" name="claimShiftType" id="claimShiftType" value="@frm_claimShiftType" autocomplete="off" /></td>
            <td><input class="timepicker" name="claimStartWorkTime" id="claimStartWorkTime" style="width:100px;" value="@frm_claimStartWorkTime" autocomplete="off" /></td>
            <td><input class="timepicker" name="claimEndWorkTime" id="claimEndWorkTime" style="width:100px;" value="@frm_claimEndWorkTime" autocomplete="off" /></td>
            <td><input class="timepicker" name="claimStartOT" id="claimStartOT" style="width:100px;" value="@frm_claimStartOT" autocomplete="off" /></td>
            <td><input class="timepicker" name="claimEndOT" id="claimEndOT" style="width:100px;" value="@frm_claimEndOT" autocomplete="off" /></td>
            <td class="text-center"><span id="totalClockedHours">@frm_claimTotalOTHours</span><input type="hidden" name="claimTotalOTHours" id="claimTotalOTHours" value="@frm_claimTotalOTHours"></td>
            <td><input style="width:66px" class="numeric" name="claimBreakHours" id="claimBreakHours" value="@frm_claimBreakHours" autocomplete="off" /></td>
            <td style="text-align:center;"><input type="number" class="numeric" name="claimHours_OT1_5" id="claimHours_OT1_5" style="width:40px;" value="@frm_claimHours_OT1_5" autocomplete="off" /></td>
            <td style="text-align:center;"><input type="number" class="numeric" name="claimHours_OT2_0" id="claimHours_OT2_0" style="width:40px;" value="@frm_claimHours_OT2_0" autocomplete="off" /></td>
            <td style="text-align:center;"><input style="display:inline;width:1.8em;height:1.8em;" type="checkbox" name="claimHours_PH" id="claimHours_PH" class="checkbox" value="@frm_claimHours_PH" @DisplayHelper.AddCheckedAttribute(frm_claimHours_PH) /></td>
            <td style="text-align:center;"><input style="display:inline;width:1.8em;height:1.8em;" type="checkbox" name="claimHours_Less4H" id="claimHours_Less4H" class="checkbox" value="@frm_claimHours_Less4H" @DisplayHelper.AddCheckedAttribute(frm_claimHours_Less4H) /></td>
            <td style="text-align:center;"><input style="display:inline;width:1.8em;height:1.8em;" type="checkbox" name="claimHours_More4H" id="claimHours_More4H" class="checkbox" value="@frm_claimHours_More4H" @DisplayHelper.AddCheckedAttribute(frm_claimHours_More4H) /></td>
            <td><input style="width:90px" type="number" class="numeric" name="claimAllowance_Meal" id="claimAllowance_Meal" value="@frm_claimAllowance_Meal" autocomplete="off" /></td>
            <td><input style="width:90px" type="number" class="numeric" name="claimAllowance_Shift" id="claimAllowance_Shift" style="width:40px;" value="@frm_claimAllowance_Shift" autocomplete="off" /></td>
            <td><input type="text" class="kendo_textbox" name="claimRemark" id="claimRemark" value="@frm_claimRemark" autocomplete="off" /></td>
            <td style="white-space:nowrap">
            @if (mode == "ADD")
            {
                <button type="submit" name="actionButton" value="submit" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add</button>
            }
            @if (mode == "EDIT")
            {
            <button type="submit" name="actionButton" value="update" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Update</button>
            }
            </td>
        </tr>
    </tbody>
</table>
